<template>
	<view class="container">
		<!-- 导航栏 -->
		<uni-nav-bar title="导航栏组件">
			<uni-icons type="scan" size="32" style="position: absolute;top: 15px; left: 20px;"></uni-icons>
			<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
			<uni-icons type="chat" size="32" style="position: relative;top: 15px;"></uni-icons>
		</uni-nav-bar>
		<uni-row>
			<uni-col :span="2"><uni-icons type="scan" size="32"
					style="position: relative;top: 15px;"></uni-icons></uni-col>
			<uni-col :span="20">
				<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
			</uni-col>
			<uni-col :span="2">
				<uni-icons type="chat" size="32" style="position: relative;top: 15px;"></uni-icons>
			</uni-col>
		</uni-row>

		<!-- 轮播图 -->
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						{{item.content}}
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 宫格 -->
		<uni-grid :column="4" :highlight="true" @change="changeCategory">
			<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">文本信息</text>
				</view>
			</uni-grid-item>
		</uni-grid>

		<!-- 卡片列表 -->
		<uni-card sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">
		
		</uni-card>
		<uni-card  sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">
			<template v-slot="title">
				<span style="color: red;">hhh</span>
			</template>
		</uni-card>
		<uni-card  sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">
			<template v-slot="title">
				<span style="color: red;">hhh</span>
			</template>
		</uni-card>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
				list: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: 'Grid 4',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/c5.png',
						text: 'Grid 5'
					},
					{
						url: '/static/c6.png',
						text: 'Grid 6'
					},
					{
						url: '/static/c7.png',
						text: 'Grid 7'
					},
					{
						url: '/static/c8.png',
						text: 'Grid 8'
					}
				]
			}
		},
		methods: {
			onClick(e) {
				
				// 切换tabBar
				uni.switchTab({
					url:"/pages/my/my"
				})
				console.log(e)
			},
			changeCategory(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
				// 类似 router.push()跳转页面 
				// uni.navigateTo({
				// 	url:"/pages/item/"+1;
				// })
				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			change(e) {
				this.current = e.detail.current;
			}

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>